<template>
	<view>
		<!-- <u-navbar :is-back="true" :is-fixed="true" title="订单评价"></u-navbar> -->
		<free-divider></free-divider>
		<scroll-view scroll-y scroll-with-animation style="height: calc(100vh - 0px)" :show-scrollbar="false"
			@scrolltolower="loadMore" @scrolltoupper="refresh">
			<view class="border-bottom pr-3 pl-3 mt-1" v-for="(item, index) in list">
				<view class="dfes py-3">
					<img :src="getFullImageUrl(item.downAvatar)" class="rounded-circle"
						style="width: 52px; height: 52px;" />
					<view class="pl-2 lineHight-2">
						<view class="font-14">{{item.agricultureUserId_dicText || '-'}}</view>
						<view class="text-A0A0A0 font-12">{{ item.createTime || '-' }}</view>
					</view>
					<view v-if="!item.orderEvaluationReply" @click="showReplyBox(item.id)"
					class="font-14" style="margin-left: auto; color: #94D2F3;">回复</view>
				</view>
				<view class="lineHight font-14">{{ item.orderEvaluation || '-' }}</view>
				<view class="font-14 dfex bg-EFEFEF pl-3 pr-3 py-2 mt-3 rounded">
					<view>{{ item.productServeName || '-' }}</view>
					<view class="text-FFC251">{{ item.orderState_dictText || '-' }}</view>
				</view>
				<view v-if="item.orderEvaluationReply" class="lineHight-3 font-14">评价回复：{{ item.orderEvaluationReply }}</view>
				<view v-else class="mb-3"></view>
			</view>
			<view v-if="!hasMore && list.length > 0" class="text-center mt-3 mb-3">
				<view class="text-muted">没有更多数据了</view>
			</view>
			<view v-else-if="!hasMore && list.length === 0" class="text-center mt-3 mb-3">
				<view class="icon-sousuo1 iconfont text-999999" style="font-size: 55px;"></view>
				<view class="text-999999 font-15">暂时木有内容呀~~</view>
			</view>
			<view v-else class="text-center mt-3 mb-3">
				<view class="btn btn-primary">加载更多</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import freeDivider from '@/components/free-ui/free-divider.vue'
	import $H from '@/common/free-lib/request.js'
	import {
		getImageUrl
	} from '@/common/free-lib/util.js';
	export default {
		components: {
			freeDivider,
		},
		data() {
			return {
				list: [],
				form: {
					pageNo: 1,
					pageSize: 10,
					total: 0 // 总页数
				},
				hasMore: true, // 是否还有更多数据
			}
		},
		onLoad() {
			// TODO: 评价回复数据对接
			this.getList()
		},
		methods: {
			// 拼接图片方法
			getFullImageUrl(imagePath) {
				return getImageUrl(imagePath);
			},
			getList() {
				// TODO: 评价回复数据对接
				$H.get(
					`/down/downServiceOrder/down/orderEvaluationReplyList`, {...this.form}, {
						token: true
					}
				).then((res) => {
					this.list = res.result.records || [];
					this.form.total = res.result.total;
					this.hasMore = this.list.length < this.form.total;
				})
			},
			showReplyBox(id){
				const that = this;
				uni.showModal({
					title: '评价填写',
					editable:true,
					placeholderText:"请输入",
					success: function (res) {
						if (res.confirm) {
							if(!res.content){
								uni.showToast({
									title: '请输入评价内容',
									icon: 'error'
								});
						}
							uni.showLoading({
									title: '加载中'
								});
								$H.post('/down/downServiceOrder/down/orderEvaluationReply', {
									id:id,
									orderEvaluationReply:res.content
								}, {})
									.then(res => {
										uni.hideLoading();
										if (res.success) {
											uni.showToast({
												title: '修改成功',
												icon: 'success'
											});
											that.pageNo = 1;
											that.list = [];
											that.getList();
											return;
										} else {
											uni.showToast({
												title: res.message||'修改失败',
												icon: 'error'
											});
										}
									})
									.catch(error => {
										uni.hideLoading();
										console.error('请求出错', error); // 处理任何错误  
										uni.showToast({
											title: '修改失败',
											icon: 'error'
										});
									});
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return;
			},
			// 加载更多
			loadMore() {
			
				if (this.form.pageNo * this.form.pageSize >= this.form.total) {
					this.hasMore = false;
					return;
				}
				this.form.pageNo++;
				// 请求数据
				this.getList();
			},
			// 下拉刷新
			refresh() {
				// 重置页码为 1
				this.form.pageNo = 1;
				// 清空数据列表
				this.list = [];
				// 设置标记为有更多数据
				this.hasMore = true;
				// 重新请求数据
				this.getList();
				// 结束下拉刷新动画
				uni.$emit('stopPullDownRefresh');
			},
		},
	}
</script>

<style></style>